<template>
  <div>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">


      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item label="菜单路由" prop="path">
        <el-input v-model="ruleForm.path"></el-input>
      </el-form-item>


      <el-form-item label="菜单图标" prop="icon">
        <el-input v-model="ruleForm.icon"></el-input>
      </el-form-item>


      <el-form-item label="菜单等级" prop="type">
        <el-radio-group v-model="ruleForm.type" v-for="city in cities" :label="city.value" :key="city.value">
          <el-radio :label="city.value" style="margin: auto 10px">{{ city.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--      <el-form-item label="父级菜单" prop="pid">-->
      <!--        <el-input type="text" v-model.number="ruleForm.pid=0" :disabled="true">-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->

      <el-form-item label="父级菜单" prop="pid">
        <el-radio-group v-model="ruleForm.pid" v-for="city in pid" :label="city.value" :key="city.value">
          <el-radio :label="city.value" style="margin: auto 10px">{{ city.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'insertLeftMenu',
    data () {
      var pid = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('父级id不能为空'))
        }
        callback()
      }

      var name = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('菜单名称不能为空'))
        }
        callback()
      }

      var path = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('菜单路由不能为空'))
        }
        callback()
      }

      var icon = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('菜单图标不能为空'))
        }
        callback()
      }

      var type = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('菜单等级不能为空'))
        }
        callback()
      }
      return {
        cities: [
          {
            value: 1,
            label: '一级菜单'
          }
        ],
        pid: [
          {
            value: 0,
            label: '默认当前菜单'
          }
        ],
        ruleForm: {
          pid: '',
          name: '',
          path: '',
          icon: '',
          type: ''
        },
        rules: {
          pid: [
            {validator: pid, trigger: 'blur'}
          ],
          name: [
            {validator: name, trigger: 'blur'}
          ],

          path: [
            {validator: path, trigger: 'blur'}
          ],

          icon: [
            {validator: icon, trigger: 'blur'}
          ],

          type: [
            {validator: type, trigger: 'blur'}
          ]
        }
      }
    },
    created () {

    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.ruleForm)
            alert('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>

</style>
